<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin: 0px;padding: 0px;}
    div{width: 500px;margin: 0px auto;}
    table{width: 500px;}
    th,td{border: 1px solid #ccc;border-collapse: collapse;}
    img{width: 40px;height: 50px;}
    input{width: 20px;}
    tr td:nth-child(5){color: red;}
  </style>
</head>
<body>
  <div>
    <table cellpadding='0' cellspacing= "0" >
      <thead>
        <thead>
          <tr><th>名称</th><th>图片</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr>
        </thead>
      <tbody>
        <tbody>
          <tr>
            <td>小米</td>
            <td><img src="http://p1.music.126.net/A4oyg7nydQk9na3fCE7ZDg==/109951165421617285.jpg?imageView&amp;quality=89"></td>
            <td>500</td>
            <td><button onclick="sub()" >-</button><input value="1"><button onclick="add()" >+</button></td>
            <td >500</td>
            <td>删除</td>
          </tr>
          <tr><td>华为</td><td><img src="http://p1.music.126.net/A4oyg7nydQk9na3fCE7ZDg==/109951165421617285.jpg?imageView&amp;quality=89"></td>
            <td>1000</td><td>
              <button>-</button><input value="1" ><button  onclick="add()" >+</button></td><td>1000</td><td>删除</td>
            </tr>
          <tr><td>苹果</td><td><img src="http://p1.music.126.net/A4oyg7nydQk9na3fCE7ZDg==/109951165421617285.jpg?imageView&amp;quality=89"></td><td>1500</td><td><button>-</button><input value="1"><button>+</button></td><td>1500</td><td>删除</td></tr>
          <tr><td>三星</td><td><img src="http://p1.music.126.net/A4oyg7nydQk9na3fCE7ZDg==/109951165421617285.jpg?imageView&amp;quality=89"></td><td>2000</td><td><button>-</button><input value="1"><button>+</button></td><td>2000</td><td>删除</td></tr>
       </tbody>
    </table>
    <p>
      总计:    <span> 5000  </span>   
    </p>
  </div>
  <script>
    // 求总计
   let getTotal = function () {
      let tdArr = document.querySelectorAll("tr td:nth-child(5)")
      let span = document.querySelector("span")
      let sum = 0
      for(let td of tdArr) {
        sum +=  Number.parseInt(td.innerText);
      }
      span.innerText = sum
    }
    
    let sub = function () {
      // event.target 触发事件的元素
      let btn = event.target;
      // 获取btn 按钮的后一个元素
      let input =  btn.nextElementSibling
      // 获取单价
      let ftd =  btn.parentElement
      let ptd =  ftd.previousElementSibling
      // 小计
      let sumTd =  ftd.nextElementSibling
      // 价格
      let price = ptd.innerText
      input.value = --input.value;
      //  如果value 
      if (input.value<=1) {
        input.value = 1
      }
      sumTd.innerText =  input.value*price
      // 求一次总计
      getTotal();
      // console.log(num)
    }

    let add = function () {
      // event.target 触发事件的元素
      let btn = event.target;
      // 获取btn 按钮的前一个元素
      let input =  btn.previousElementSibling   
       // 获取单价
      let ftd =  btn.parentElement
      let ptd =  ftd.previousElementSibling
      // 小计
      let sumTd =  ftd.nextElementSibling
      // 价格
      let price = ptd.innerText   
      input.value = ++input.value;
      sumTd.innerText =  input.value*price
      // 求一次总计
      getTotal();
    }

    
  </script>
  
</body>
</html>
